<template>
  <div class="goods">
    <PageSearch
      :search-form-config="searchFormConfig"
      @reset-btn-click="handleResetClick"
      @query-btn-click="handleQueryClick"
    ></PageSearch>
    <PageContent
      ref="pageContentRef"
      :content-table-config="contentTableConfig"
      :prop-list="propList"
      page-name="goods"
    >
      <!-- 状态 -->
      <template #status="scope">
        <!-- 作用域插槽传递的值 -->
        <el-button
          plain
          :type="scope.row.status ? 'success' : 'danger'"
          size="small"
        >
          {{ scope.row.status ? '启用' : '禁用' }}
        </el-button>
      </template>
      <template #image="scope">
        <el-image
          style="width: 60px; height: 60px"
          :src="scope.row.imgUrl"
          :preview-src-list="[scope.row.imgUrl]"
          :preview-teleported="true"
        >
        </el-image>
      </template>
      <template #oldPrice="scope">{{ '¥' + scope.row.oldPrice }}</template>
    </PageContent>
  </div>
</template>

<script setup lang="ts">
import PageContent from '@/components/PageContent/PageContent.vue'
import PageSearch from '@/components/PageSearch/PageSearch.vue'

import { contentTableConfig, propList } from './config/content.config'
import { searchFormConfig } from './config/search.config'

import { usePageSearch } from '@/hooks/usePageSearch'
const [pageContentRef, handleResetClick, handleQueryClick] = usePageSearch()
</script>
<style scoped lang="less"></style>
